<template>
	<div>
		<!-- 卡片视图区域 -->
		<el-card>
			<div id="app">
			    <div class="content-header">
			        <h1>供货商管理</h1>
			    </div>
			    <div class="app-container">
			        <div class="box">
			            <div class="filter-container">
			                <el-input placeholder="请输入供货商ID" v-model="pagination.id" style="width: 200px;" class="filter-item"></el-input>
			                <el-input placeholder="请输入供货商名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
			                <el-input placeholder="请输入供货商电话" v-model="pagination.telephone" style="width: 200px;" class="filter-item"></el-input>
							<el-button @click="getAll()" class="dalfBut">查询</el-button>
			                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
			            </div>
			
			            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
			                <el-table-column type="index" align="center" label="序号"></el-table-column>
			                <el-table-column prop="id" label="供货商ID" align="center"></el-table-column>
			                <el-table-column prop="name" label="供货商名称" align="center"></el-table-column>
							<el-table-column prop="address" label="供货商地址" align="center"></el-table-column>
							<el-table-column prop="telephone" label="供货商电话" align="center"></el-table-column>
							<el-table-column prop="email" label="供货商邮箱" align="center"></el-table-column>
							<el-table-column prop="remarks" label="简介" align="center"></el-table-column>
							
			                <el-table-column label="操作" align="center">
			                    <template slot-scope="scope">
			                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
			                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
			                    </template>
			                </el-table-column>
			            </el-table>
						
			            <!--分页组件-->
			            <div class="pagination-container">
			                <el-pagination
			                        class="pagiantion"
			                        @current-change="handleCurrentChange"
			                        :current-page="pagination.currentPage"
			                        :page-size="pagination.pageSize"
			                        layout="total, prev, pager, next, jumper"
			                        :total="pagination.total">
			                </el-pagination>
			            </div>
			
			            <!-- 新增标签弹层 -->
			            <div class="add-form">
			                <el-dialog title="新增供货商" :visible.sync="dialogFormVisible">
			                    <el-form ref="formData" :model="formData" :rules="rules" label-position="right" label-width="100px">
			                        <el-row>
			                            <el-col :span="12">
			                                <el-form-item label="供货商名称" prop="name">
			                                    <el-input v-model="formData.name"/>
			                                </el-form-item>
			                            </el-col>
										<el-col :span="12">
										    <el-form-item label="供货商地址" prop="address">
										        <el-input v-model="formData.address"/>
										    </el-form-item>
										</el-col>
										<el-col :span="12">
										    <el-form-item label="供货商电话" prop="telephone">
										        <el-input v-model="formData.telephone"/>
										    </el-form-item>
										</el-col>
										<el-col :span="12">
										    <el-form-item label="供货商邮箱" prop="email">
										        <el-input v-model="formData.email"/>
										    </el-form-item>
										</el-col>
			                        </el-row>
									
			                        <el-row>
			                            <el-col :span="24">
			                                <el-form-item label="描述">
			                                    <el-input v-model="formData.remarks" type="textarea"></el-input>
			                                </el-form-item>
			                            </el-col>
			                        </el-row>
			                    </el-form>
			
			                    <div slot="footer" class="dialog-footer">
			                        <el-button @click="cancel()">取消</el-button>
			                        <el-button type="primary" @click="handleAdd()">确定</el-button>
			                    </div>
	
			                </el-dialog>
			            </div>
			
			            <!-- 编辑标签弹层 -->
			            <div class="add-form">
			                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
			                    <el-form ref="formData" :model="formData" :rules="rules" label-position="right" label-width="100px">
			                        <el-row>
			                            <el-col :span="12">
			                                <el-form-item label="供货商名称" prop="name">
			                                    <el-input v-model="formData.name"/>
			                                </el-form-item>
			                            </el-col>
			                        	<el-col :span="12">
			                        	    <el-form-item label="供货商地址" prop="address">
			                        	        <el-input v-model="formData.address"/>
			                        	    </el-form-item>
			                        	</el-col>
			                        	<el-col :span="12">
			                        	    <el-form-item label="供货商电话" prop="telephone">
			                        	        <el-input v-model="formData.telephone"/>
			                        	    </el-form-item>
			                        	</el-col>
			                        	<el-col :span="12">
			                        	    <el-form-item label="供货商邮箱" prop="email">
			                        	        <el-input v-model="formData.email"/>
			                        	    </el-form-item>
			                        	</el-col>
			                        </el-row>
			                        
			                        <el-row>
			                            <el-col :span="24">
			                                <el-form-item label="描述">
			                                    <el-input v-model="formData.remarks" type="textarea"></el-input>
			                                </el-form-item>
			                            </el-col>
			                        </el-row>
			                    </el-form>
			
			                    <div slot="footer" class="dialog-footer">
			                        <el-button @click="cancel()">取消</el-button>
			                        <el-button type="primary" @click="handleEdit()">确定</el-button>
			                    </div>
			                </el-dialog>
			            </div>
			        </div>
			    </div>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			let checkPhoneNumber = (rule, value, callback) => {
			    if (/^1[34578]\d{9}$/.test(value)) {
			        console.log(value);
			        callback();
			    } else {
			        return callback(new Error("请输入正确电话号！"));
			    }
			};
			
			let checkMaile = (rule, value, callback) => {
			    if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value)) {
			        console.log(value);
			        callback();
			    } else {
			        return callback(new Error("请输入正确邮箱号！"));
			    }
			};
			
			return {
				dataList: [],//当前页要展示的列表数据
				dialogFormVisible: false,//添加表单是否可见
				dialogFormVisible4Edit:false,//编辑表单是否可见
				formData: {},//表单数据
	
				rules: {//校验规则
					name: [
						{ required: true, message: '供应商姓名为必填项', trigger: 'blur' },
					],
					address: [
						{ required: true, message: '供应商地址为必填项', trigger: 'blur' },
					],
					email: [
						{ required: true, message: '供应商邮箱为必填项', trigger: 'blur' },
						{ validator: checkMaile, message: '请输入正确邮箱！'}
					],
					telephone: [
						{ required: true, message: '供应商电话为必填项', trigger: 'blur' },
						{ validator: checkPhoneNumber, message: '请输入正确电话号！'}
					],
				},
				
				pagination: {//分页相关模型数据
				    currentPage: 1,//当前页码
				    pageSize:10,//每页显示的记录数
				    total:0,//总记录数
				    telephone: "",
				    name: "",
					id: ""
				}
			}
		},
		//钩子函数，VUE对象初始化完成后自动执行
		created() {
		    //查询全部
		    this.getAll();
		},
		
		methods: {
		    //列表
			// getAll() {
		    //     //发送异步请求
		    //     axios.get("http://localhost:8088/books").then((res) => {
		    //         console.log(res.data);
		    //         this.dataList = res.data.data;
		    //     })
		    
		    //分页查询getPage()
		    getAll(){
		        //组织参数，拼接url请求地址
		        var param = "?name=" + this.pagination.name;
				param += "&telephone=" + this.pagination.telephone;
		        param += "&id=" + this.pagination.id;
		        
		        //发送异步请求
		        this.$axios.get("http://localhost:8088/Supplier/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
		                console.log(res.data);
		                // this.dataList = res.data.data.records;
		                // this.pagination.pageSize = res.data.data.size;
		                // this.pagination.currentPage = res.data.data.current;
		                // this.pagination.total = res.data.data.total;
						this.dataList = res.data.records;
						this.pagination.pageSize = res.data.size;
						this.pagination.currentPage = res.data.current;
						this.pagination.total = res.data.total;
		                this.$message.success("查询成功")
		            })
		    },
		
		    //切换页码
		    handleCurrentChange(currentPage) {
		        //修改页码值为当前选中的页码值
		        this.pagination.currentPage = currentPage;
		        //执行查寻
		        this.getAll();
		    },
				
		    //弹出添加窗口
		    handleCreate() {
		        this.dialogFormVisible = true;
		        this.resetForm();
		    },
		
		    //重置表单
		    resetForm() {
		        //表单置空
		        this.formData = {};
		    },
		
		    //添加
		    handleAdd () {
				this.$refs.formData.validate((valid) => {
					if (valid) {
						this.$axios.post("http://localhost:8088/Supplier", this.formData).then((res) => {
							console.log(res)
							//先判断操作是否成功
						    if(res.data){
						        //1、关闭弹层
						        this.dialogFormVisible = false;
						        //1.2、显示成功
						        this.$message.success("添加成功");
						   }else{
						        // this.$message.error(res.data.msg);
						        this.$message.error("添加失败");
						    }
						}).finally(()=>{
						    //2、重新加载数据
						    this.getAll();
						})
					} else {
						this.$message.error("请填写正确信息！");
					}
				});
				
		        
		    },
		
		    //取消
		    cancel(){
		        this.dialogFormVisible = false;
		        this.dialogFormVisible4Edit = false;
		        this.$message.info("当前操作取消");
		    },
			
		    // 删除
		    handleDelete(row) {
		        //确定删除？
		        this.$confirm("此操作将永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{
		            this.$axios.delete("http://localhost:8088/Supplier/" + row.id).then((res)=>{
		                //先判断操作是否成功
		                if(res.data){
		                    this.$message.success("删除成功");
		                }else{
		                    this.$message.error("数据同步失败，自动刷新");
		                }
		            }).finally(()=>{
		                //2、重新加载数据
		                this.getAll();
		            });
		        }).catch(()=>{
		            this.$message.info("取消操作");
		        });
		    },
		
		    //弹出编辑窗口
		    handleUpdate(row) {
		        this.$axios.get("http://localhost:8088/Supplier/" + row.id).then((res) => {
					console.log(res);
		            if(res.data != null){
		                this.dialogFormVisible4Edit = true;
		                this.formData = res.data;
		            }else{
		                this.$message.error("数据同步失败，自动刷新");
		            }
		        }).finally(()=>{
		            this.getAll();
		        });

		    },
		
		    //修改
		    handleEdit() {
				this.$refs.formData.validate((valid) => {
					if (valid) {
						this.$axios.put("http://localhost:8088/Supplier", this.formData).then((res) => {
						    //先判断操作是否成功
						    if(res.data){
						        //1、关闭弹层
						        this.dialogFormVisible4Edit = false;
						        //1.2、显示成功
						        this.$message.success("修改成功");
						    }else{
						        this.$message.error("修改失败");
						    }
						}).finally(()=>{
						    //2、重新加载数据
						    this.getAll();
						})
					} else {
						this.$message.error("请填写正确信息！");
					}
				});
				
		        
		    },
		
		}
	}
</script>


<style>
html,body {

	/* overflow-y: scroll; */

	margin: 0;

}

a {

	color: #3c8dbc;

	text-decoration:none;

}

/* new style */

.skin-purple .main-sidebar {

	background: #fff;

}

.skin-purple .main-header .logo:hover {

	background: #0abdfe;

}

.skin-purple .main-header .navbar .sidebar-toggle:hover {

	/* background: #0abdfe; */

}

.skin-purple .main-header {

	min-height: 70px;

	padding: 0;

}

.skin-purple .main-header .logo {

	height: 50px;

	/* background: #0abdfe; */

	float: left;

	padding: 20px 0 0 15px;

	/* width: 230px; */

}

.skin-purple .main-header .navbar {

	height: 70px;

	background: linear-gradient(to right, #0abdfe, #67f0e0);

  /* margin-left: 230px; */

}

.winfo{margin-left: 230px;}

.skin-purple .main-header .sidebar-toggle {

	display: inline-block;

	padding: 24px 15px;

	color: #fff;

}

.skin-purple .main-sidebar {

	padding-top: 75px;

}

.sidebar-menu > li {

	line-height: 1.8

}

.skin-purple .sidebar-menu > li > a {

	font-size: 16px;

	color: #666

}

.skin-purple .sidebar-menu>li:hover>a,

.skin-purple .sidebar-menu>li.active>a {

	background: transparent;

	color: #666;

	border-left-color: transparent

}

.skin-purple .treeview-menu>li>a:hover {

	color: #fff

}

.skin-purple .sidebar-menu>li>.treeview-menu {

	background: #fff;

}

.sidebar-menu .treeview-menu > li > a {

	font-size: 16px;

	padding-left: 35px;

	color: #999

}

.sidebar-menu .treeview-menu > li:hover {

	background: #0abdfe;

}

@media (min-width: 768px) {

	.skin-purple  .navbar-nav>li>a 

		{

			padding-top: 25px;

    		padding-bottom: 25px;

		}

}

.modal-body .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {

	color: #0abdfe

}

.modal-body .nav-tabs>li>a {

	color: #555

}

.bg-olive {

	background-color: #0abdfe !important;

}

.dataTable .btn[class*='bg-']:hover {

	box-shadow: none

}

.btn-primary {

	background: #0abdfe;

	border-color: #0abdfe;

}

.box-body .nav>li>a {

	color: #666

}

.box-body .nav>li.active>a {

	color: #0abdfe;

}





/* tab 1*/

.double {

	line-height: 58px;

}

.title .glyphicon{

	padding: 3px;

	font-size: 13px;

    border-radius: 8px;

    color: #fff;

	

}

.data span.arrowup {

	color: #d88918;

}

.data span.arrowdown {

	color: #6bb10a;

}

.item-blue .glyphicon{

	background-color: #39a9ea;

}

.item-green {

	line-height: 58px;

}

.item-green .glyphicon{

	background-color: #6bb10a;

	line-height: 12px;

}

.item-orange .glyphicon{

	background-color:#d88918;

}

.item-red .glyphicon{

	background-color: #f14f4f;

}

.chart .chart-box {

	margin: 10px;

}



/* 数据表格label */

.content-wrapper .data-type {

	/*width: 90%;*/

	margin: 10px 5px;

	border:1px solid #d4d4d4;

	border-radius: 2px;

}

.data-type .title,

.data-type .data {

	padding: 3px 12px;

	border-top: 1px solid #d4d4d4;

	overflow: hidden;

    height: 42px;

}

.data-type .title {

    line-height: 34px;

	border-right: 1px solid #d4d4d4;

}



.data-type .data:last-child{

	border-right: 0;

}

.data-type .title{

	text-align: center;

	background: #ececec;

}

.data-type .data .line{

	vertical-align: middle;

	overflow: hidden;

	padding-bottom: 10px;

	padding-top: 10px;

}



/* label行高度 */

.data-type .data > label {

	line-height:36px;

}

.data-type .data > .form-group {

	line-height:36px;

}

.data-type .data.text {

	line-height:36px;

}

/* label行分隔符 */

.data-type .data.border-right {

	border-right: 1px solid #d4d4d4;

}



/* 表格双倍高度 */

.data-type .title.rowHeight2x,

.data-type .data.rowHeight2x {

	height:84px;

}

.data-type .title.rowHeight2x ,

.data-type .data.rowHeight2x.text {

	line-height:78px;

}

/*.data-type .data.rowHeight2x > label {

	line-height:78px;

}*/

.data-type .title.editer,

.data-type .data.editer {

	height:320px;

}

.data-type .title.editer {

	line-height:300px;

}



/*清除parding*/

.padding-clear {

	padding-right: 0px;

	padding-left: 0px;

}



/* 文件上传 */

/*a  upload */

.a-upload {

    padding: 4px 10px;

    height: 35px;

    line-height: 25px;

    position: relative;

    cursor: pointer;

    color: #888;

    background: #fafafa;

    border: 1px solid #ddd;

    border-radius: 4px;

    overflow: hidden;

    display: inline-block;

    *display: inline;

    *zoom: 1

}

.a-upload  input {

    position: absolute;

    font-size: 100px;

    right: 0;

    top: 0;

    opacity: 0;

    filter: alpha(opacity=0);

    cursor: pointer

}

.a-upload:hover {

    color: #444;

    background: #eee;

    border-color: #ccc;

    text-decoration: none

}

/* 医疗 */

.search-box {

	display: inline-block

}

.input-sm {

	height: 32px;

}

.btn-create {

	margin-left: 10px;

    background-color: #0abdfe;

    border-color: #0abdfe;

    color: #fff;

}

.btn-create:hover,

.btn-create:active,

.btn-create:focus

 {

	color: #fff;

}

.pagination {

	margin: 0

}

.medical-modal {

	position:absolute;

	top:0%;

	left:0%;

	display:none;

	background:rgba(0,0,0,0.3);

	width:100%;

	height:100%;

	position:fixed;

	z-index:9999

}

.medical-modal .content {

	position: absolute;

	left: 35%;

	top: 25%;

	border-radius: 8px;

	width: 30%;

	height: 40%;

	background-color: #fff;

}

.pageitems, .jump {

	margin-left: 15px;

	display: inline-block;

}

.jumppage {

	width: 30px;

	text-align: center

}

@media (min-width: 768px) {

    .subscribe .modal-dialog {

		width: 900px;

		margin: 30px auto;

	}

}

.checklist {

	margin-top: 10px;

}

.checklist .input-group {

	margin-bottom: 10px;

}

.modal-page {

	margin-top: 20px;

	font-size: 12px;

}

.modal-page .form-control {

	font-size: 12px;

	padding: 0;

	height: 26px;

}

.table-check {

	margin: 0;

	display: inline-block;

    margin-right: 4px;

}

.daterange {

	margin:10px 10px 0;

}

.daterange .input-group .form-control {

	width: 20%;

}

.chart-title {

	font-size: 16px;

	font-weight: normal;

	text-align: center;

}

.diaocha {

	line-height: 2

}

.diaocha h5{

	color: #f98d45;

	background: #f5f7f9;

	line-height: 2;

	padding-left: 15px;

}

.diaocha div {

	padding: 0 20px;

	border-bottom: 1px solid #dce1e7;

}

.diaocha div h5 {

	color: #555;

	background: transparent;

	padding-left: 0;

}

.diaocha label {

	font-weight: normal;

}

.diaocha .form-group {

	margin-left: 0;

	margin-right: 0;

}

.diaocha .options label {

	margin-right: 10px;

}



.tizhi button{

	margin-right: 15px;

}

.innerform {

	margin-top: 20px;

}

.fa-search {

	cursor: pointer

}

.line {

	margin-top: 10px;

}

input[type=radio]:focus {

	outline: none

}

input[type="radio"]{

	appearance: none; 

	-webkit-appearance: none;

	outline: none;

	display:none

}

label input[type="radio"] {

	content: "\a0";

    display: inline-block;

    vertical-align: middle;

    font-size: 16px;

    width: 15px;

    height: 15px;

    margin-right: .4em;

    border-radius: 50%;

	border: 1px solid #c7c6c6;

    line-height: 1;

    margin-top: -1px;

}

label input[type="radio"]:checked {

	border: 3px solid #0abdfe;

}

.right-menu {

	float: right;

	padding: 18px 30px 0 0;

	color: #fff;

}

.el-dropdown{color: #fff;}

.avatar-wrapper img{width: 30px;height: 30px;border-radius: 15px;vertical-align: middle}

.el-popper[x-placement^=bottom]{margin-top: 30px;}

.el-dropdown-menu__item--divided{margin: 0;border:0 none;border-bottom: 1px solid #ebeef5}

.help{

	padding: 0 10px;

}

.help .fa{ margin-right: 5px;}

.el-main{

	background: #ecf0f5;

}

.el-menu{border: 0 none;}

.main{

	height: 100vh;

	min-width: 800px;

	min-height: 600px;

	overflow: hidden;

}

.main aside{

	overflow: visible;

  height: 100%;

}

.main aside.isClossTab{

	width: 100%;

	height: 60px;

	cursor: pointer;

	font-size: 25px;

	text-align: center;

	line-height: 60px;

	font-weight: bold;

	border-right: 1px solid #807c7c;

	box-sizing: border-box;

}

.main aside .menu{

	width: 100%;

  border-right:0;

}

.el-menu .fa{

	vertical-align: middle;

    margin-right: 5px;

    width: 24px;

    text-align: center;

    font-size: 18px;

}

.el-menu-item a{

	color: #303133

}

.el-menu-item:hover,.el-menu-item.is-active {

	color: #fff;

	background: #0abdfe;

}

.el-menu-item:hover a,.el-menu-item.is-active a{

	color: #fff;

}

.el-submenu__title:hover{background: none;}

.main-footer {

	background: #fff;

	padding: 15px 0;

	color: #444;

}

/* title */

.content-header {

	position: relative;

	padding: 15px 15px 0 15px;

	/* margin-top: 70px; */

}

.content-header > h1 {

	margin: 0;

	font-size: 24px;

	font-weight: normal;

}

.content-header > h1 > small {

	font-size: 15px;

	display: inline-block;

	padding-left: 4px;

	font-weight: 300;

}

.content-header > .breadcrumb {

	float: right;

	background: transparent;

	margin-top: 0;

	margin-bottom: 0;

	font-size: 12px;

	padding: 7px 5px;

	position: absolute;

	top: 20px;

	right: 10px;

	border-radius: 2px;

}

/*  */

.app-container{

	background: #fff;

	margin: 15px 30px 15px 15px;

	

}

.pagiantion{

	text-align: right;

	padding: 15px;

}

.box {

	position: relative;

	border-radius: 3px;

	background: #ffffff;

	border-top: 3px solid #3c8dbc;

	padding: 10px;

	margin-bottom: 20px;

	width: 100%;

	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}

.filter-container{

	padding:10px 0 15px 0;

}

.main-container{margin-top: 70px;}

.filter-container .el-button,.filter-container .el-input__inner{

 padding: 0 15px;

 height: 34px;

 line-height: 34px;

}

.el-aside{overflow: hidden;}

.el-submenu .el-menu-item a{

	display: block;

	height: 50px;

}

.el-menu--collapse .el-submenu__icon-arrow{ display: none}

/* .el-container{position: relative;} */

/* foot */

.el-footer{

	position: absolute;

	left: 180px;

	right: 0px;

	bottom: -80px;

}

.boxMain .el-upload--text{

	position:static;

}

.boxMain >div{

	display: inline-block;

}

.excelTitle{

	text-align: center;

	overflow: hidden;

	line-height: 40px;

}

.excelTitle .el-button{

	float: left;

}

.excelTime{

	padding: 10px 0;

	text-align: right;

}

.exceTable{

	width: 100%;

	border-right: 1px solid #e6e6e6;

	border-bottom: 1px solid #e6e6e6;

	font-size: 14px;

	color: #333;

}

.exceTable tr,.exceTable td{

	border-left: 1px solid #e6e6e6;

	border-top: 1px solid #e6e6e6;

	height: 40px;

	line-height: 40px;

	padding: 0 10px;

}

.exceTable .headBody{

	text-align: center;

	font-weight: 700;

	font-size: 14px;

}

.tabletrBg{

	background: #fcfcfc;

	text-align: right;

}

.textCenter{

	text-align: center

}

.checkScrol{

	height: 277px;

	overflow-y:scroll; ;

}
</style>
